@import '../../theme/style/variables.module.less';

.container {
    .properties(padding, 16);
    background: var(--mi-notice-item-background);
    .radius(8);
    .properties(margin-bottom);
    width: 100%;
    position: relative;
}

.cursor {
    cursor: pointer;
}

.inner {
    .flex(flex-start, flex-start);
    width: 100%;
}

.avatar {
    .properties(width, 32);
    .properties(height, 32);
    .circle();
    .properties(min-width, 32);
    overflow: hidden;
    border: .125rem solid var(--mi-notice-item-avatar);
    .properties(margin-top, 4);

    > img {
        transform: scale(1.1);
        .circle();
    }

    & + .info {
        .properties(margin-left, 12);
    }
}

.info {
    width: 100%;
    .flex(flex-start, flex-start, column);

    &-title {
        .flex(flex-start, space-between);
        width: 100%;
        .properties(margin-bottom, 4);
        flex-wrap: nowrap;

        :global(.ant-tag) {
            margin-right: 0;
        }
    }
}

.title {
    .font-size(14, bold);
    .lines(1);
    color: var(--mi-notice-item-text);
    .properties(margin-right);
}

.date {
    .font-size(12);
    color: var(--mi-notice-item-date);
    .properties(min-width, 92);
    .properties(margin-bottom, 4);
}

.summary,
.content {
    color: var(--mi-notice-item-summary);
    .font-size(12);
    .lines(2);
}

.tag {
    background: var(--mi-notice-item-tag-background);
    color: var(--mi-notice-item-tag-text);
    border-color: var(--mi-notice-item-tag-border);
}

.detail {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 2;
    border: solid .0625rem var(--mi-notice-item-content-border);
    background: var(--mi-notice-item-content-background);
    .frosted(16);
    .properties(padding, 1);
    .radius(8);
    .transition();
    overflow: hidden;

    &-inner {
        .properties(padding, 16);
        position: relative;
        width: 100%;
        height: 100%;
    }

    &-title {
        .title {
            .font-size(16, bold);
            .lines(10);
        }
    }

    &-back {
        .properties(margin-bottom, 16);
        cursor: pointer;

        :global(.anticon) {
            .properties(margin-right);
        }
    }

    &-info {
        .properties(margin-top, 16);
        overflow-x: hidden;
        overflow-y: auto;
        word-break: break-all;
        color: var(--mi-notice-item-content-text);
        line-height: 1.75;
        .scrollbar();
    }

    &-tag {
        position: absolute;
        right: 0;
        top: 0;

        :global(.ant-tag) {
            margin-right: 0;
        }
    }
}

:export {
    --notice-item-background: rgba(var(--mi-rgb-background), .5);
    --notice-item-border: var(--mi-inverse-on-surface);
    --notice-item-avatar: var(--mi-primary);
    --notice-item-text: var(--mi-on-surface);
    --notice-item-summary: var(--mi-inverse-surface);
    --notice-item-date: rgba(var(--mi-rgb-inverse-surface), .5);
    --notice-item-tag-text: var(--mi-on-tertiary);
    --notice-item-tag-background: var(--mi-tertiary);
    --notice-item-tag-border: var(--mi-tertiary);
    --notice-item-content-background: rgba(var(--mi-rgb-background), .7);
    --notice-item-content-border: var(--mi-surface-variant);
    --notice-item-content-text: var(--mi-on-surface-variant);
}